import 'package:ac/common/style.dart';
import 'package:ac/widget/ac_app_bar.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'ac_edit_profile_logic.dart';

class AcEditProfilePage extends StatelessWidget {
  final logic = Get.find<AcEditProfileLogic>();
  final state = Get.find<AcEditProfileLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AcAppbar(title: ""),
      backgroundColor: Colors.white,
      body: SizedBox(
        width: 375.w,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(height: 68.h),
            Stack(
              clipBehavior: Clip.none,
              children: [
                Obx(() {
                  return ClipOval(
                    child: Container(
                      padding: EdgeInsets.all(2.w),
                      color: Colors.white,
                      width: 98.w,
                      height: 98.w,
                      child: ClipOval(
                        child: CachedNetworkImage(
                          imageUrl: logic.userInfo.value?.avatarThumbUrl ?? "",
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  );
                }),
                Positioned(
                  bottom: 0,
                  right: 0,
                  child: GestureDetector(
                    onTap: logic.updateAvatar,
                    child: Image.asset(
                      "images/icon_camera.png",
                      width: 26.w,
                      height: 26.w,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 32.h),
            Container(
              width: 311.w,
              height: 44.h,
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: const Color(0xffF7F8FA),
                  borderRadius: BorderRadius.circular(6.r)),
              child: Row(
                children: [
                  Text(
                    "Nick Name",
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: Colors.black.withOpacity(0.3),
                    ),
                  ),
                  Expanded(
                    child: TextField(
                      controller: state.nickNameController,
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: textColorBlack,
                      ),
                      maxLength: 15,
                      onChanged: (value) {
                        logic.userInfo.refresh();
                      },
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "Nick Name",
                        hintStyle: TextStyle(
                          fontSize: 12.sp,
                          color: Colors.black.withOpacity(0.3),
                        ),
                        // 隐藏计数
                        counterText: "",
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 22.h),
            Container(
              width: 311.w,
              height: 44.h,
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: const Color(0xffF7F8FA),
                  borderRadius: BorderRadius.circular(6.r)),
              child: Row(
                children: [
                  Text(
                    "Date of Birth",
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: Colors.black.withOpacity(0.3),
                    ),
                  ),
                  const Spacer(),
                  Obx(() {
                    return GestureDetector(
                      onTap: logic.selectBirthday,
                      child: Text(
                        state.birthday.value,
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: textColorBlack,
                        ),
                      ),
                    );
                  }),
                ],
              ),
            ),
            const Spacer(),
            Obx(() {
              bool disEnable = state.nickNameController.text.isEmpty ||
                  state.birthday.value.isEmpty == true;
              return GestureDetector(
                onTap: disEnable ? null : logic.submit,
                child: Container(
                    height: 48.h,
                    width: 327.w,
                    decoration: BoxDecoration(
                      gradient: !disEnable
                          ? const LinearGradient(
                              colors: [
                                Color(0xFFFFC371),
                                Color(0xFFFF5F6D),
                              ],
                            )
                          : null,
                      color: !disEnable ? null : const Color(0xffF0F0F0),
                      borderRadius: BorderRadius.circular(24.r),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      "Submit",
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                      ),
                    )),
              );
            }),
            SizedBox(height: 118.h),
          ],
        ),
      ),
    );
  }
}
